<script setup lang="ts">
import menuService from '@renderer/composables/useComputeMenu'
import useMenuStore from './useMenuStore'
import { Right, MenuFoldOne, MenuUnfoldOne } from '@icon-park/vue-next'
import { useRouter } from 'vue-router'
const route = useRouter()
const pageQuery = route.currentRoute.value.query as { [key: string]: string }
const menuStore = useMenuStore()
</script>

<template>
  <div class="admin-menu drag border-r" :class="{ close: !menuStore.menuState }">
    <div class="menuState nodrag" @click="menuStore.toggleMenu">
      <MenuUnfoldOne
        theme="filled"
        size="32"
        fill="#888888"
        class="cursor-pointer duration-300"
        v-if="menuStore.menuState" />
      <MenuFoldOne theme="filled" size="32" fill="#888888" class="cursor-pointer duration-300" v-else />
    </div>
    <div class="container nodrag">
      <dl v-for="(menu, index) of menuService.menus.value" :key="index">
        <dt @click="menuService.toggleParentMenu(menu)">
          <section>
            <Right
              theme="outline"
              size="18"
              :fill="menu.isClick ? '#FF9600' : '#dcdcdc'"
              class="mr-3 duration-300"
              :class="{ 'rotate-90': menu.isClick }" />
          </section>
          <section>
            <component
              :is="menu?.icon"
              :size="!menuStore.menuState ? '40' : '24'"
              :fill="menu.isClick ? '#FF9600' : '#dcdcdc'"
              theme="filled"
              class="icon" />
            <span class="text-base iconText" :class="{ 'text-[#FF9600]': menu.isClick }">{{ menu?.title }}</span>
          </section>
        </dt>
        <dd :class="!menu.isClick || !menuStore.menuState ? 'hidden' : 'mt-2'">
          <div
            :class="{ active: cmenu.isClick }"
            v-for="(cmenu, key) of menu.children"
            :key="key"
            @click="menuService.setCurrentMenu(cmenu.route!, pageQuery)">
            {{ cmenu?.title }}
          </div>
        </dd>
      </dl>
    </div>
  </div>
</template>
<style lang="scss">
.admin-menu {
  @apply z-10 bg-white h-full absolute w-[160px] flex flex-col gap-3;
  .menuState {
    @apply flex justify-center mt-3 cursor-pointer;
  }
  .container {
    dl {
      @apply text-[#888888] text-sm relative p-2;
      dt {
        @apply text-sm flex cursor-pointer items-center;
        section {
          @apply flex items-center;
          .icon {
            @apply mr-2;
          }
        }
      }
      dd {
        div {
          @apply opacity-80 text-base text-center py-2 text-black rounded-md cursor-pointer duration-300 hover:bg-[#fff2e2] hover:text-[#FF9600];
          &.active {
            @apply bg-[#fff2e2] text-[#FF9600];
          }
        }
      }
    }
  }
  &.close {
    @apply w-[64px];
    .container {
      @apply flex flex-col gap-3;
      dl {
        @apply flex flex-col items-center;
        dt {
          section {
            @apply flex flex-col gap-2 justify-center items-center;
            .icon {
              @apply mr-0;
            }
            .iconText {
              @apply hidden;
            }
          }
          section:nth-child(1) {
            @apply hidden;
          }
        }
        &:hover {
          dd {
            display: block !important;
            @apply absolute left-full w-[160px] bg-white border rounded-md;
          }
        }
      }
    }
  }
}
</style>
